<template>
  <hooyn-nav-bar class="header" leftIcon="arrow-left" title="搜索" leftIconfont="true" fontSize="16px"
    leftIconColor="#fff" color="#fff" backgroundColor="#68A0F7" :returnNav="true" />
  <div class="commit">

    <div class="input-item">
      <img src="../../static/login/search.png" alt="" class="input-icon">
      <input type="text" v-model="state.value" class="input" placeholder="请输入关键字查询" @input="clickInput">
    </div>
    <!-- 列表 -->
    <div class="list" v-if="state.messageList.length != 0">
      <div class="list-item" v-for="item in state.messageList" :key="item.ID" @click="gotoCi(item)">
        <div class="item-title">
          <span class="tag" style="">{{
      item.tag
    }}</span>
          <!-- <span> {{ item.title }}</span> -->
          {{ item.title }}
        </div>
        <div style="margin-top: 1rem ; color: #c5c5c5;">
          {{ item.tiem }}
        </div>
      </div>

    </div>
    <div class="kong" v-else>
      <img src="../../static/login/no.png" alt="">
      <div>
        暂无数据

      </div>

    </div>
  </div>
</template>

<script setup>

import $api from '@/utils/api'
import { showToast, showNotify } from 'vant';
const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()
import axios from 'axios'


const crypto = require("crypto-js");
const list = ref([]);
//园区服务
// flistfw
//发现活动
//find
//街道咨讯
// information
const state = reactive({
  value: '',
  messageList: [],

})
const clickInput = () => {
  // console.log(list.value)
  state.messageList = []
  if (state.value == '') return
  list.value.forEach((ele, index) => {
    console.log(ele.title, state.value, index)
    if (ele.title.indexOf(state.value) != -1) {
      state.messageList.push(ele)
    }
  })
}



const qgliitem = (item) => {
  let url = 'https://baoanqifu.tgovcloud.com/micro/EGB-APP-BOOT/api/auth/curUser'
  axios.get(url,
    {
      headers: {
        'Access-Uid': item.uid,
        "Access-Token": item.token,
        "Access-App-Code": 'yljd',
      },
    }
  )
    .then(res => {
      state.roleLevel = res.data.data.roleLevel
      state.corpCid = res.data.data.corpCid
      state.corpName = res.data.data.corpName
    })
}
const Featured = () => {

  $api.FeaturedPark().then(res => {
    if (res.message.length > 0) {
      res.message.forEach(item => {
        list.value.push({
          title: item.Name,
          ID: item.ID,
          url: '/park/detail',
          type: 'yq',
          tag: '特色园区'
        })
      })
    }


  })
}
//企业
const Corporat = () => {
  $api.CorporateStyle().then(res => {
    if (res.message != '') {
      res.message.forEach(item => {
        list.value.push({
          title: item.Name,
          ID: item.ID,
          url: '/firm/detail',
          type: 'qy',
          tag: '企业风采'
        })
      })
    }

  })
}
const gotoCi = (item) => {
  console.log(item)
  if (item.type == 'yq' || item.type == 'qy') {
    router.push({
      path: item.url,
      query: {
        item: item.ID,
        title: item.title,
        ID: item.ID,
      }
    })
  } else {
    wx.miniProgram.navigateTo({
      url: item.url
    })
  }

}



const getSignature = (msg, key, timestamp, nonce) => {
  const sha256Hex1 = sha256Hex(msg);
  const hmacInput = key + timestamp + nonce + sha256Hex1;
  const hmac2561 = hmac256(hmacInput, nonce); // 注意：这里的 nonce 应该不是 HMAC 密钥的一部分  
  return hmac2561;
};
const sha256Hex = (msg) => {
  let lsit = crypto.SHA256(msg).toString(crypto.enc.Hex).toLowerCase()
  return lsit;
};

const hmac256 = (key, msg) => {
  const secretKey = crypto.enc.Utf8.parse(key);
  const msg1 = crypto.enc.Utf8.parse(msg);
  const hash = crypto.HmacSHA256(msg1, secretKey);
  return hash.toString(crypto.enc.Hex).toLowerCase();
};
const getRandomNumber = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 示例用法
const msg = "请求报文信息";
const key = "w2cs1PPZazaPCvXw";
const timestamp = Math.floor(Date.now() / 1000);
const nonce = getRandomNumber(1000, 9999);
const start = 0; /* 页数，0开始 */
const limit = 300; /* 每页显示数量，默认20 */

const postData = {
  relObjType: "STREET",
  relObjID: '440306009000',
  start: start,
  limit: limit,
};
const postData12 = {
  relObjType: "DISTRICT",
  relObjID: '',
  start: start,
  limit: limit,
};
import { Base64 } from 'js-base64';
const signature = getSignature(JSON.stringify(postData), key, timestamp, nonce);
const signature12 = getSignature(JSON.stringify(postData12), key, timestamp, nonce);
const postData1 = {
  relObjType: "PARK",
  relObjID: '440306025000',
  start: start,
  limit: limit,
};
const signature1 = getSignature(JSON.stringify(postData1), key, timestamp, nonce);


const activityitem = () => {
  let url = "https://baoanqifu.tgovcloud.com/micro/EGB-APP-BOOT/api/park/applet/page4cms";
  axios.post(url, postData, {
    headers: {
      "Timestamp": timestamp,
      "Signature": signature,
      "Nonce": nonce,
      "App-Id": "yljd",
    },
  })
    .then((res) => {
      if (res.data.data != '') {
        res.data.data.forEach(item => {
          list.value.push({
            title: item.title,
            ID: item.cuid,
            url: '/packages/zoneIndex/zxDetail/index?cuid=' + item.cuid,
            type: 'jd',
            tiem: item.publishDate,
            tag: '街道咨询'
          })
        })


      }
    });

  let url1 = "https://baoanqifu.tgovcloud.com/micro/EGB-APP-BOOT/api/park/applet/page4activity";
  axios.post(url1, postData12, {
    headers: {
      "Timestamp": timestamp,
      "Signature": signature12,
      "Nonce": nonce,
      "App-Id": "yljd",
    },
  })
    .then((res) => {
      if (res.data.data != '') {
        res.data.data.forEach(item => {
          list.value.push({
            title: item.title,
            ID: item.cuid,
            url: '/packages/activity/detail/index?cuid=' + item.cuid,
            type: 'hd',
            tiem: item.endTime,
            tag: '活动'
          })

        })

      }
    });


}
const daillist = () => {
  let url = "https://baoanqifu.tgovcloud.com/micro/EGB-APP-BOOT/api/park/applet/page4shop";
  axios.post(url, postData1, {
    headers: {
      "Timestamp": timestamp,
      "Signature": signature1,
      "Nonce": nonce,
      "App-Id": "yljd",
    },
  })
    .then((res) => {
      if (res.data.data != '') {

        res.data.data.forEach(item => {
          list.value.push({
            title: item.shopName || '',
            ID: item.cuid,
            url: '/packages/zoneIndex/zyfw/shop-detail/index?cuid=' + item.cuid,
            type: 'yq',
            tag: '园区服务'
          })
          //  item.srvTypeL2 =item.srvTypeL2.split(",")
          // console.log(state.listits, 'state.listits');
        })
        // state.listits = [...new Set(state.listits)]

      }
    });

}


onMounted(() => {
  activityitem();
  daillist();
  Featured();
  Corporat();
})


watch(() => route, () => {
  // if (route.name === 'search') {
  //   // activityitem()
  // } else {
  //   clearInterval(state.timer)
  // }
}, {
  deep: true,
  immediate: true
})
</script>

<style lang='scss' scoped>
.input-item {
  border-radius: 20px;
  padding: 1rem;
  margin: 0.5rem;
  color: #30394a;
  display: flex;
  align-content: center;
  background-color: #f5fdff;

  .input-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 5px;
    color: #21a4d8;
  }

  .input {
    border: none;
    flex: 1;
    font-size: 1rem;
  }
}

.list {
  margin: 1rem 0.5rem;

  .list-item {
    .item-title {
      font-size: .9rem;
      font-weight: 600;
      margin-top: 1rem;
    }

    padding-bottom: 2rem;
    border-bottom: 1px solid #e9e9e9;
  }
}

.kong {
  text-align: center;
  padding: 5rem 0;

  img {
    width: 2.5rem;
    height: 2.5rem;
  }
}

.tag {
  background-color: #06a9ec;
  color: #fff;
  border-radius: 5px;
  padding: 0 5px;
  box-sizing: border-box;
  font-size: 0.7rem;
  float: left;
  text-align: center;
  min-width: 3rem;
  height: 1.5rem;
  line-height: 1.5rem;
  margin-right: 10px;
}
</style>